<template>
  <div class="bigbox">
    <!-- 搜索栏盒子 -->
    <div class="topbox">
      <div class="forms">
        <el-form ref="form"  label-width="80px" label-position="left">
            <el-row :gutter="20">
                <el-col :span="5">
                  <el-form-item label="用电企业">
                    <FilterSelect 
                      ref="yonghu" 
                      :optionlist="yonghulist" 
                      :valuekey="{name:'name',value:'id'}"
                      @changeselect="changeqite"
                      :defaultvalue="companyId"
                      ></FilterSelect>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="月份">
                    <el-date-picker v-model="month" type="month" value-format="yyyy-MM" placeholder="选择月份" size="small" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="能源类型">
                    <el-select v-model="energyType" placeholder="请选择能源类型"  size="small" style="width: 100%;" @change="$forceUpdate()">
                      <el-option v-for="(item,index) in leixinglist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="9" style="text-align: right;">
                  <el-form-item label="">
                    <el-button size="small"  @click="chongzhi">重 置</el-button>
                     <el-button size="small" type="primary" @click="getdatalist">查 询</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>
      </div>
    </div>
    <!-- 盒子主体 -->
    <div class="bodybox">
      <div class="titlebox">
        <div>能源数据填报</div>
        <div class="butti">
          <span style="display: flex;">
            <el-button size="small" type="primary" @click="dialogVisible=true"><i class="el-icon-plus"></i>模版新增</el-button>
            <TopTooltip @shuaxin="shuaxin" @command="command"></TopTooltip>
          </span>
        </div>
      </div>
       <div class="tablebox">
        <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" 
        :issize="issize">
        <el-table-column
            prop="address"
            label="消耗量"
            align="center"
            width="150">
            <template #default="{row}">
              <span> <el-input v-model="row.consumption" size="small" @keyup.enter.native="handleEnter(row)"></el-input> </span>
            </template>
          </el-table-column>
        </TableColumn>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageobj.pageNo"
            :page-size="15"
            @current-change="getdatalist"
            :total="+totalCount">
          </el-pagination>
        </div>
          <!-- 弹窗 -->
          <div class="dialog">
          <el-dialog
          title="模板新增"
          :visible.sync="dialogVisible"
          :show-close="false"
          width="40%">
          <div slot="title">模板新增<span style="float: right;font-size: 18px;padding: 0 10px;cursor: pointer;" @click="quxiao">
            <i class="el-icon-close"></i> </span>
          </div>
          <div>
            <el-form :model="form" label-position="right" label-width="100px" ref="formdata">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用电单位" prop="companyId">
                    <el-select v-model="form.companyId" placeholder="请选择用电单位"  size="small" style="width: 100%;">
                      <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="能源分类" prop="energyClassify" >
                    <el-select v-model="form.energyClassify" placeholder="请选择能源分类"  size="small" style="width: 100%;" >
                      <el-option v-for="(item,index) in nengyuanlist" :key="index" :label="item.energyClassifyName" :value="item.energyClassify" class="option"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="能源类型" prop="energyType">
                    <el-select v-model="form.energyType" placeholder="请选择能源类型"  size="small" style="width: 100%;" @change="$forceUpdate()">
                      <el-option v-for="(item,index) in dialeixinglist" :key="index" :label="item.energyTypeName" :value="item.energyType" class="option"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="数据来源月份" prop="dataSourceMonth">
                    <el-date-picker v-model="form.dataSourceMonth" type="month" value-format="yyyy-MM" placeholder="选择月" size="small" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="数据模板月份" prop="dataTemplateMonth">
                    <el-date-picker v-model="form.dataTemplateMonth" type="month" value-format="yyyy-MM" placeholder="选择月" size="small" style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="quxiao">取 消</el-button>
            <el-button size="small" @click="submit" type="primary" >确 定</el-button>
          </span>
        </el-dialog>
        </div>
       </div>
    </div>
  </div>
</template>

<script>
import FilterSelect from '@/components/FilterSelect'
import {gettianbaofenleilistapi,gettianbaoleixinglistapi,gettianbaolistapi,addtianbaomubanapi,updatedtianbaoapi} from '@/api/energy-consumption/Basic-information/FillReport'
import TableColumn from '@/components/Table/index.vue'
import TopTooltip from '@/components/TopTooltip/index.vue'
import {getzidianxialaapi} from '@/api/guidelines'
import {getyongdianlistapi} from '@/api/energy-consumption/Basic-information/medium'
export default {
  name: 'CallPoliceIndex',
  components: {
    FilterSelect,
    TableColumn,
    TopTooltip
  },
  data() {
    return {
      dialogVisible:false,
      month: '',
      energyType:'',
      companyId:'',
      yonghulist:[],
      leixinglist:[],
      issize: 'medium',
      tableData: [],
      tableConfig: [
        { label: '序号', type: 'index', center: 'center', width: '100' },
        { label: '单位名称', prop: 'companyName',  },
        { label: '日期', prop: 'date', center: 'center' },
        { label: '能源分类', prop: 'energyClassifyName',},
        { label: '能源类型', prop: 'energyTypeName',},
        { label: '单位', prop: 'energyUnit',}
      ],
      totalCount: '',
      pageobj: {
        pageNo: 0,
        pageSize:15
      },
      form:{},
      nengyuanlist: [],
      dialeixinglist:[]
    };
  },

  async mounted() {
    // 获取用电单位
    const {data:{list}} = await getyongdianlistapi()
    this.yonghulist = list
    const companyId = localStorage.getItem('companyId')
    this.$set(this,'companyId',companyId?+companyId:'')
   // 获取能源类型并筛选
    const res = await getzidianxialaapi({ dictType: 'EnergySubType' })
    this.leixinglist = res.data.list
    this.getdatalist()
  },

  methods: {
    changeqite(val) {
      this.$set(this,'companyId',val)
      localStorage.setItem('companyId', val)
    },
    chongzhi() {
      this.companyId = ''
      this.month=''
      this.energyType = ''
      this.getdatalist()
    },
    // 修改消耗量
    async handleEnter(row) {
      await updatedtianbaoapi({ id: row.id, companyId: row.companyId, consumption: row.consumption }).then(res => {
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message:res.code == 200 ?'修改成功':res.message
        })
        this.getdatalist()
      })
    },
    // 弹窗确认新增
    async submit() {
     await addtianbaomubanapi(this.form).then(res => {
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message:res.code == 200 ?'新增成功':res.message
        })
        this.quxiao()
        this.getdatalist()
      })
    },
    // 获取表格数据
    async getdatalist() {
      this.$refs.tabledata.loading=true
      const { data: { list, totalCount } } = await gettianbaolistapi({
        companyId: this.companyId, month: this.month,
        energyType: this.energyType, pageNo: this.pageobj.pageNo - 1,
        pageSize: this.pageobj.pageSize
      })
      this.tableData = list
      this.totalCount=totalCount
      this.$refs.tabledata.loading=false
     },
    // 弹窗取消
    async quxiao() {
      this.form.id=''
      this.$refs.formdata.resetFields()
      this.dialogVisible = false
    },
           // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 列表刷新
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
  },
  watch:{
    async dialogVisible(val) {
      if (val) {
       // 获取能源分类
       const nengyuan = await gettianbaofenleilistapi()
        this.nengyuanlist = nengyuan.data.list
        // 获取能源类型
        const { data: { list } } = await gettianbaoleixinglistapi()
       this.dialeixinglist=list
      }
    }
  }
};
</script>

<style scoped>
.option{
  padding-left: 10px;
}
.bigbox{
  padding: 10px;
  height: 100%;
  .topbox{
    height: 80px;
    background-color: #fff;
    margin-bottom: 10px;
    padding: 20px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .titlebox{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .butti{
        display: flex;
      }
    }
    .tablebox{
      height: 88%;
      .fenye{
        text-align: end;
        margin-top: 10px;
      }
    }
  }
}
::v-deep .el-row{
  margin-bottom: 10px;
}
::v-deep .el-dialog__footer{
  text-align: center;
}
</style>